/** @format */

import React from 'react';
import {menu} from './index.styl';
import FormatListBulleted from '@material-ui/icons/FormatListBulleted';
import Settings from '@material-ui/icons/Settings';
import Add from '@material-ui/icons/Add';
import {Link} from 'react-router-dom';
import {store} from '@/store';

interface IProps {
  [propName: string]: any;
}

interface IState {
  isStretch: boolean;
}

interface IList {
  to: string;
  title: string;
  icon: React.FC;
}
// 目录
const MenuList: React.FC = () => {
  const lists: Array<IList> = [
    {
      to: '/fragment',
      title: 'Blog List',
      icon: FormatListBulleted,
    },
    {
      to: '/addblog',
      title: 'Add Blog',
      icon: Add,
    },
    {
      to: '/setting',
      title: 'Setting',
      icon: Settings,
    },
  ];

  const listsEl = lists.map((item, index) => {
    return (
      <li key={index}>
        <Link to={item.to} title={item.title}>
          <item.icon /> {item.title}
        </Link>
      </li>
    );
  });

  return <ul>{listsEl}</ul>;
};

class Menu extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {isStretch: store.getState().isStretch};
    store.subscribe(() => this.setState({isStretch: store.getState().isStretch}));
  }

  render(): JSX.Element {
    return (
      <nav className={`${menu} ${this.state.isStretch ? 'stretch' : ''}`}>
        <input className={`${this.state.isStretch ? 'stretch' : ''}`} type="text" value="100" disabled />
        <MenuList />
      </nav>
    );
  }
}

export default Menu;
